<script lang="ts" setup>
// @ts-ignore
import {postApply} from "~/server/friend.service";
// @ts-ignore
import {Message} from "@arco-design/web-vue";

const friendType = ref('生活' as any)
const friendName = ref('' as any)
const friendDesc = ref('' as any)
const friendUrl = ref('' as any)
const friendEmail = ref('' as any)
const friendAvatar = ref('' as any)
const friendScreenshot = ref('' as any)

function submit() {
    validateApplyInfo()
    postApply({
        applyType: friendType.value,
        applyEmail: friendEmail.value,
        applyName: friendName.value,
        applyAvatar: friendAvatar.value,
        applyAddress: friendUrl.value,
        applyIntro: friendDesc.value,
        applyScreenshot: friendScreenshot.value
    }).then(({data}: any) => {
        if (data.flag) {
            ElMessage({message: '申请提交成功', type: 'success'})
        } else {
            ElMessage({message: data.message, type: 'error'})
        }
    })
}

function validateApplyInfo() {
    if (friendType.value === ''){
        ElMessage.warning('请选择分类')
        return
    }
    if (friendName.value == '') {
        ElMessage.warning('请输入站点名称')
        return
    }
    if (friendDesc.value == '') {
        ElMessage.warning('请输入站点简介')
        return
    }
    if (friendUrl.value === '') {
        ElMessage.warning('请输入网站地址')
        return
    }
    if (friendAvatar.value == '') {
        ElMessage.warning('请输入站点logo')
        return
    }
    if (friendEmail.value === '') {
        ElMessage.warning('请输入邮箱')
        return
    }
    if (!/\S+@\S+\.\S+/.test(friendEmail.value)) {
        ElMessage.warning('请输入正确的邮箱格式')
        return
    }
}
</script>


<template>
    <div class="friend-apply-form">
        <h6>类型<em>必填</em></h6>
        <ul class="id">
            <li>
                <p>
                    <span class="friend-form-control-wrap" data-name="friend-menu">
                        <span class="friend-form-control friend-radio">
                            <span class="friend-list-item first">
                                <input type="radio" name="friend-type" value="生活" v-model="friendType" checked="checked">
                                <span class="friend-list-item-label">生活</span>
                            </span>
                            <span class="friend-list-item">
                              <input type="radio" name="friend-type" v-model="friendType" value="技术">
                              <span class="friend-list-item-label">技术</span>
                            </span>
                            <span class="friend-list-item">
                                <input type="radio" name="friend-type" v-model="friendType" value="艺术">
                                <span class="friend-list-item-label">艺术</span>
                            </span>
                            <span class="friend-list-item last">
                                <input type="radio" name="friend-type" v-model="friendType" value="科学">
                                <span class="friend-list-item-label">科学</span>
                            </span>
                        </span>
                    </span>
                    <em>提示：会根据文章内容调整分类。</em>
                </p>
            </li>
        </ul>
        <h6>主要资料<em>必填</em></h6>
        <ul class="info">
            <li>
                <p>
                  <span class="friend-form-control-wrap" data-name="friend-name">
                      <input size="40"
                             class="website-name"
                             aria-required="true"
                             aria-invalid="false"
                             placeholder="名称"
                             v-model.trim="friendName"
                             type="text"
                             name="friend-name">
                  </span>
                </p>
            </li>
            <li>
                <p>
                  <span class="friend-form-control-wrap" data-name="friend-text">
                      <input size="40"
                             class="website-desc"
                             aria-required="true"
                             aria-invalid="false"
                             placeholder="简述"
                             v-model.trim="friendDesc"
                             type="text"
                             name="friend-text">
                  </span>
                </p>
            </li>
            <li>
                <p>
                  <span class="friend-form-control-wrap" data-name="friend-url-site">
                      <input size="40"
                             class="website-url"
                             aria-required="true"
                             aria-invalid="false"
                             placeholder="站点链接"
                             v-model.trim="friendUrl"
                             type="url"
                             name="friend-url-site">
                  </span>
                </p>
            </li>
            <li>
                <p>
                  <span class="friend-form-control-wrap" data-name="friend-avatar">
                      <input size="40"
                             class="website-avatar"
                             aria-required="true"
                             aria-invalid="false"
                             placeholder="站点logo"
                             v-model.trim="friendAvatar"
                             type="url"
                             name="friend-avatar">
                  </span>
                </p>
            </li>
            <li>
                <p>
                  <span class="friend-form-control-wrap" data-name="friend-email">
                      <input size="40"
                             class="email"
                             aria-required="true"
                             aria-invalid="false"
                             placeholder="申请邮箱"
                             v-model.trim="friendEmail"
                             type="email"
                             name="friend-email">
                  </span>
                    <em>提示：您填写的邮箱用来获取站点审核消息。</em>
                </p>
            </li>
        </ul>
        <h6>附加资料<em>选填</em></h6>
        <ul class="info">
            <li>
                <p>
                    <span class="friend-form-control-wrap" data-name="friend-url-rss">
                        <input size="40" class="website-screenshot"
                               aria-invalid="false"
                               placeholder="站点截图"
                               v-model.trim="friendScreenshot"
                               type="url"
                               name="friend-url-screenshot">
                    </span>
                    <em>提示：用于展示站点的首屏。</em>
                </p>
            </li>
        </ul>
        <p>
            <input class="has-spinner" type="submit" value="提 交" @click="submit">
        </p>
    </div>
</template>
<style scoped>
.friend-apply-form em {
    color: rgb(var(--color-rgb));
    margin: .5em;
    font-size: .5rem;
    vertical-align: middle;
    line-height: 2;
    display: inline-block;
}

.friend-apply-form ul {
    display: flex;
    flex-direction: column;
    margin: 1rem 0 2rem;
    list-style: none;
    gap: 1rem;
}

.friend-apply-form :is(.id, .info) p {
    border-radius: var(--radius);
    min-height: 2rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.friend-apply-form ul em {
    margin: .5em 0 0;
    color: hsl(var(--font-color) / .5);
}
.friend-list-item{
    display: inline-block;
    margin: 0 2em 0 0;
}
.friend-list-item input{
    padding: 0.25rem 0.5rem;
}
.friend-form-control-wrap input{
    line-height: inherit;
}
</style>
